<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Font Awesome 4.7.0 常用图标示例</title>
    <!-- 引入 Font Awesome 4.7.0 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f9f9f9;
        }

        h1 {
            color: #333;
        }

        .icon-item {
            display: inline-flex;
            align-items: center;
            margin: 10px;
            padding: 8px 12px;
            background: white;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .icon-item i {
            margin-right: 8px;
            font-size: 18px;
            width: 20px;
            text-align: center;
        }

        .icon-item span {
            font-size: 14px;
            color: #555;
        }
    </style>
</head>

<body>
    <h1>🔧 Font Awesome 4.7.0 常用图标展示</h1>

<i class="fa fa-lightbulb-o"></i>

    <!-- 常用功能图标 -->
    <div class="icon-item">
        <i class="fa fa-home"></i>
        <span>首页 (fa-home)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-user"></i>
        <span>用户 (fa-user)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-cog"></i>
        <span>设置 (fa-cog)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-search"></i>
        <span>搜索 (fa-search)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-heart"></i>
        <span>喜欢/收藏 (fa-heart)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-star"></i>
        <span>评分/星星 (fa-star)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-envelope"></i>
        <span>邮件 (fa-envelope)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-phone"></i>
        <span>电话 (fa-phone)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-map-marker"></i>
        <span>地图标记 (fa-map-marker)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-shopping-cart"></i>
        <span>购物车 (fa-shopping-cart)</span>
    </div>

    <!-- 文件 & 媒体 -->
    <div class="icon-item">
        <i class="fa fa-file-text"></i>
        <span>文档 (fa-file-text)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-image"></i>
        <span>图片 (fa-image)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-camera"></i>
        <span>相机 (fa-camera)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-film"></i>
        <span>视频/电影 (fa-film)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-music"></i>
        <span>音乐 (fa-music)</span>
    </div>

    <!-- 工具 & 操作 -->
    <div class="icon-item">
        <i class="fa fa-download"></i>
        <span>下载 (fa-download)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-upload"></i>
        <span>上传 (fa-upload)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-edit"></i>
        <span>编辑 (fa-edit)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-trash"></i>
        <span>删除/垃圾桶 (fa-trash)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-print"></i>
        <span>打印 (fa-print)</span>
    </div>

    <!-- 交互 & 状态 -->
    <div class="icon-item">
        <i class="fa fa-share"></i>
        <span>分享 (fa-share)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-external-link"></i>
        <span>外链 (fa-external-link)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-lock"></i>
        <span>锁定 (fa-lock)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-unlock"></i>
        <span>解锁 (fa-unlock)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-calendar"></i>
        <span>日历 (fa-calendar)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-clock-o"></i>
        <span>时钟 (fa-clock-o)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-comment"></i>
        <span>评论 (fa-comment)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-comments"></i>
        <span>多条评论 (fa-comments)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-bell"></i>
        <span>通知/铃铛 (fa-bell)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-exchange"></i>
        <span>交换/切换 (fa-exchange，你提到的图标！)</span>
    </div>

    <!-- 箭头导航 -->
    <div class="icon-item">
        <i class="fa fa-chevron-down"></i>
        <span>下拉箭头 (fa-chevron-down)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-chevron-up"></i>
        <span>上拉箭头 (fa-chevron-up)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-arrow-left"></i>
        <span>左箭头 (fa-arrow-left)</span>
    </div>

    <div class="icon-item">
        <i class="fa fa-arrow-right"></i>
        <span>右箭头 (fa-arrow-right)</span>
    </div>
</body>

</html>